<template>
    <div style="width: inherit;height: inherit;position: relative;background-color: #f8f8f8;">
        <div id="container" style="width: inherit;height: inherit;background-color: #f8f8f8;" @wheel="handleWheel"></div>

        <div class="d1" v-if="isload">
            <div class="area">
                <RadioSelect :selectList="areaList" searchKey="areaIds_LIKE_RIGHT" @returnData="setData"
                    :popupStyle="{ left: '0px', top: '20px' }" :showStyle="{ lineHeight: '27px' }" isArea isShowTitle
                    isShowSerach1>
                </RadioSelect>
            </div>
            <CommonSelect :default="timeNavList.defaultClick" :dataList="timeNavList.data" :myStyles="{ width: '110px' }"
                :keys="'dictName'" @returnData="setType">
            </CommonSelect>
            <input :placeholder="$t('text.House.l163')" class="leftTop2Input" v-model="communityOrId"
                v-if="searchData.houseClass != 2">
            <input :placeholder="$t('text.House.l303')" class="leftTop2Input" v-model="realName"
                v-if="searchData.houseClass == 2">
            <img class="img1" src="../../assets/images/search2.png" />
        </div>


        <div class="d2" v-if="isload">
            <div class="df" v-for="s in findHouseList" v-bind:key="s" style="min-width: 100px;">

                <RadioSelect :leftText="s.title" :selectList="getSelectData(s.dictionaryKey)" :searchKey="s.searchKey"
                    :isShowTitle="s.isShowTitle" :isShowSerach2="s.isShowSerach2" :inputEndText="s.inputEndText"
                    :isShowBottom="s.isShowBottom" :isMultiple="s.isMultiple" @returnData="setData" :max="s.max"
                    :min="s.min" @clearData="clearData" :fastSearch="s.fastSearch" :isSingle="s.isSingle">
                </RadioSelect>
            </div>
        </div>

        <div class="d3" @click="isShowSearch = !isShowSearch">
            <div>{{ $t('text.House.l152') }}<span>&ensp;{{ houseList.length }}&ensp;</span>{{ $t('text.House.l153') }}</div>
            <div>∨</div>
        </div>

        <div class="d4" v-show="isShowSearch">
            <div class="n1">
                <span class="n2" @click="setSort(1)">{{ $t('text.House.l154') }}</span>
                <span class="n2" @click="setSort(2)">{{ $t('text.House.l155') }}</span>
                <span class="n2" @click="setSort(3)">{{ $t('text.House.l156') }}</span>
            </div>

            <div v-if="searchData.houseClass != 2" style="width: 100%;">
                <div class="l1" v-for="item in houseList" v-bind:key="item" @click="gotoDetail(item)">
                    <div>
                        <CommonImage :src="item.pictureAddress" class="l2" />
                    </div>
                    <div class="l3">
                        <div class="l4">
                            <span style="color:#6698ff"> {{ `${item.community}&ensp;` }}</span>
                            <span v-if="item.characteristic != null">
                                <span v-for="cItems in item.characteristic.split(',')" v-bind:key="cItems">{{ cItems
                                }}&ensp;</span>
                            </span>
                        </div>
                        <div class="l5">
                            {{ item.homeType != null ? `${item.homeType}&ensp;` : '' }}
                            {{ item.floorArea != null ? `${item.floorArea + 'm²'}&ensp;` : '' }}
                            {{ item.toward != null ? `${item.toward}&ensp;` : '' }}
                            {{ item.decorationLevel != null ? `${item.decorationLevel}&ensp;` : '' }}
                        </div>
                        <div class="l9">
                            <span class="tag1" v-if="item.isTop == '1'">{{ $t('text.Common.l17') }}</span>
                            <span class="tag2" v-if="item.floorType">{{ item.floorType }}</span>
                            <span class="tag3" v-if="item.housingGrade">{{ item.housingGrade }}</span>
                            <span class="tag4" v-if="item.hasKey">{{ $t('text.Common.l15') }}</span>
                            <span class="tag5"
                                v-for="cItems in item.supportingFacilities == null ? [] : item.supportingFacilities.split(',')"
                                v-bind:key="cItems">{{ cItems }}</span>
                        </div>
                        <div class="l8">
                            <div class="l10">
                                <span class="l6" v-if="item.price">
                                    {{ (item.price == null ? '-' : String(item.price).replace(/\B(?=(\d{3})+(?!\d))/g, ',')
                                        + ' AED ') }}
                                </span>
                                <span class="l7" v-if="item.avPrice">{{ item.avPrice }}AED/m²</span>
                            </div>
                            <div @click.stop="gotoMap(item)">
                                <img src="../../assets/images/h53.svg" style="width: 20px;height: 20px;">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div v-if="searchData.houseClass == 2">
                <div class="l1" v-for="item in houseList" v-bind:key="item" @click="gotoDetail(item)">
                    <div>
                        <CommonImage :src="item.pictureAddress" class="l2" />
                    </div>
                    <div class="l3">
                        <div class="l4">
                            <span style="color:#6698ff"> {{ `${item.name}&ensp;` }}</span>
                            <span v-if="item.area"> {{ `${item.area}&ensp;` }}</span>
                        </div>
                        <div class="l5">
                            {{ item.unitType != null ? `${item.unitType}&ensp;` : '' }}
                            {{ item.lowerArea != null ? `${item.lowerArea + 'm²'}-` : '' }}
                            {{ item.upperArea != null ? `${item.upperArea + 'm²'}&ensp;` : '' }}
                            {{ item.decorationLevel != null ? `${item.decorationLevel}&ensp;` : '' }}
                        </div>
                        <div class="l9">
                            <span class="tag1" v-if="item.isTop == '1'">{{ $t('text.Common.l17') }}</span>

                            <span class="tag6"
                                v-if="item.saleStatus != null && item.saleStatus == $t('text.DialogLayout.l78')">
                                {{ $t('text.DialogLayout.l78') }}
                            </span>
                            <span class="tag8"
                                v-if="item.saleStatus != null && item.saleStatus == $t('text.DialogLayout.l79')">
                                {{ $t('text.DialogLayout.l79') }}
                            </span>

                            <span class="tag7"
                                v-if="item.saleStatus != null && item.saleStatus == $t('text.DialogLayout.l80')">
                                {{ $t('text.DialogLayout.l80') }}
                            </span>

                            <span v-for="cItems in item.sellPoint == null ? [] : item.sellPoint.split(',')"
                                v-bind:key="cItems" class="tag5">{{ cItems
                                }}&ensp;</span>

                        </div>
                        <div class="l8">
                            <div class="l10">
                                <span class="l6" v-if="item.lowerPrice || item.upperPrice">
                                    {{ (item.lowerPrice == null ? '-' :
                                        String(item.lowerPrice).replace(/\B(?=(\d{3})+(?!\d))/g, ',')
                                        + ' - ') }}
                                    {{ (item.upperPrice == null ? '-' :
                                        String(item.upperPrice).replace(/\B(?=(\d{3})+(?!\d))/g, ',')
                                        + ' AED ') }}
                                </span>
                                <span class="l7" v-if="item.unitPrice">{{ item.unitPrice }}AED/m²</span>
                            </div>
                            <div @click.stop="gotoMap(item)">
                                <img src="../../assets/images/h53.svg" style="width: 20px;height: 20px;">
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>


    </div>
</template>

<script>

import AMapLoader from "@amap/amap-jsapi-loader";
import { findHouseList } from '../../itemList';
import { areaFindTreeAll, getDropdownBoxData, findPageByParam, newsFindPageParam } from '../../http/api'
import RadioSelect from "../../components/select/RadioSelect.vue"
import CommonSelect from "../../components/input/CommonSelect.vue";
import CommonImage from "../../components/input/CommonImage.vue";
import { ElMessage } from 'element-plus'
//高德
window._AMapSecurityConfig = {
    securityJsCode: '2a6bb59a16f7402a63e0adedbcf74fa9',
}
//苹果
import mapkit from "mapkit.js";
let Amapkit = null
let throttleTimer = null;
export default {
    data() {
        return {
            isShowSearch: false,
            findHouseList: findHouseList,
            areaList: [],
            isload: false,
            dictionaryTree: [],
            timeNavList: {
                defaultClick: this.$t('text.HomeView.l12'),
                data: [{ dictName: this.$t('text.HomeView.l12'), dictValue: 0 },
                { dictName: this.$t('text.HomeView.l13'), dictValue: 1 },
                { dictName: this.$t('text.HomeView.l14'), dictValue: 2 }]
            },
            searchData: {
                houseClass: 0,
                page: 1,
                size: 100,
                maxLat: "",
                minLat: "",
                maxLon: "",
                minLon: ""
            },
            communityOrId: "",
            realName: "",
            houseList: [],
            total: 0,
            AMaps: null,
            coordinateSpan: [0.03, 0.03],
            isSetRegion: false,
            regionChangeCount: 0,
            sortState: {
                time: false,
                price: false,
                area: false
            }
        };
    },
    components: {
        RadioSelect: RadioSelect,
        CommonSelect: CommonSelect,
        CommonImage
    },

    async mounted() {
        console.log(window.mapkit)
        getDropdownBoxData().then(res => {
            if (res !== undefined) {
                this.dictionaryTree = res
                areaFindTreeAll().then(res => {
                    if (res !== undefined) {
                        this.areaList = [{ dictName: this.$t('text.Common.l12'), id: "-1" }, ...res]
                        this.isload = true
                    }
                }).catch()
            }
        })
        if (localStorage.getItem("mapType") == 'mapkit') {
            this.handleInitMap()
        } else {
            this.initMap()
        }
    },
    methods: {
        initMap() {
            AMapLoader.load({
                "key": "eca101bb1aabf80a81f81b7622ba8829",
                "version": "2.0",   // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
                "plugins": ["AMap.Scale", "AMap.ToolBar", "AMap.AutoComplete", "AMap.PlaceSearch", "AMap.ControlBar", "AMap.MouseTool"],           // 需要使用的的插件列表，如比例尺'AMap.Scale'等
            }).then((AMap) => {
                this.AMaps = AMap

                this.search()

                this.map = new AMap.Map('container', {
                    viewMode: "2D",  //  是否为3D地图模式
                    zoom: 16,   // 初始化地图级别
                    center: [113.40853, 23.17504], //中心点坐标
                    resizeEnable: true
                });
                this.map.addControl(new AMap.Scale());   // 添加左下角的比例尺
                let toolBar = new AMap.ToolBar({
                    position: {
                        bottom: '210px',
                        right: '35px'
                    }
                });
                let controlBar = new AMap.ControlBar({
                    position: {
                        bottom: '280px',
                        right: '10px',
                    },
                });
                this.map.addControl(toolBar);   // 添加右下角的放大缩小
                this.map.addControl(controlBar);   // 方向盘

                //地图移动实时获取经纬度坐标范围
                this.map.on('moveend', () => {
                    // 获取地图当前视野范围的西南角和东北角坐标
                    const bounds = this.map.getBounds();
                    const southwest = bounds.getSouthWest(); // 西南角
                    const northeast = bounds.getNorthEast(); // 东北角

                    let temp = JSON.parse(JSON.stringify(this.searchData))
                    temp.minLon = southwest.lng
                    temp.maxLon = northeast.lng
                    temp.minLat = southwest.lat
                    temp.maxLat = northeast.lat
                    this.searchData = temp
                });
            }).catch(e => {
                console.log(e);
            });
        },

        async handleInitMap() {
            // if (!mapkit ||!mapkit.loadedLibraries||mapkit.loadedLibraries.length === 0) {
            //     await new Promise(resolve => {
            //         window.initMapKit = resolve
            //     });
            //     delete window.initMapKit;
            // }
            //请求拿token，进行地图token校验
            const jwt = "eyJhbGciOiJFUzI1NiIsInR5cCI6IkpXVCIsImtpZCI6IlgyWlJWRzMyRDUifQ.eyJpc3MiOiJIMzdSWjc3V0Q0IiwiaWF0IjoxNjkzODQzMjAwLCJleHAiOjE3MDE3MDU2MDB9.kUwtcw8aCJy50FyNoZ0otwnnlcUbR_qe4QWVSO6QcJwu5rnnBb1-hgpqXhW4cxokWd8UIYhqsBaNUNfxEyZ5Bg";
            mapkit.init({
                authorizationCallback: done => {
                    done(jwt);
                }
            });
            //监听地图token验证成功，去加载地图
            window.addEventListener('mapkitloaded', this.initMapkit());
        },
        initMapkit() {
            console.log("贼tm折磨人地图开始加载")
            let loadMap = new mapkit.Map("container")

            // 监听可见区域更改
            loadMap.addEventListener('region-change-end', (data) => {
                //获取范围经纬度去查询
                //前面有两次视图更新，设置这两次不走请求
                if (this.regionChangeCount > 1) {
                    let temp = JSON.parse(JSON.stringify(this.searchData))
                    temp.minLon = data.target.region.center.longitude - data.target.region.span.latitudeDelta
                    temp.maxLon = data.target.region.center.longitude + data.target.region.span.latitudeDelta
                    temp.minLat = data.target.region.center.latitude - data.target.region.span.longitudeDelta
                    temp.maxLat = data.target.region.center.latitude + data.target.region.span.longitudeDelta
                    this.searchData = temp
                }
                this.regionChangeCount = this.regionChangeCount + 1
            });

            Amapkit = loadMap

            this.search()
        },
        //监听鼠标滚动
        handleWheel(event) {
            if (!throttleTimer && localStorage.getItem("mapType") == 'mapkit') {
                if (event.deltaY > 0) {
                    // 重新设置视野，放大地图
                    const currentCenter = Amapkit.region.center;
                    this.coordinateSpan = [this.coordinateSpan[0] * 2, this.coordinateSpan[1] * 2]
                    const region = new mapkit.CoordinateRegion(
                        new mapkit.Coordinate(currentCenter.latitude, currentCenter.longitude),
                        new mapkit.CoordinateSpan(this.coordinateSpan[0], this.coordinateSpan[1])
                    );
                    Amapkit.region = region;

                } else {
                    // 重新设置视野，缩小地图
                    const currentCenter = Amapkit.region.center;
                    this.coordinateSpan = [this.coordinateSpan[0] / 2, this.coordinateSpan[1] / 2]
                    const region = new mapkit.CoordinateRegion(
                        new mapkit.Coordinate(currentCenter.latitude, currentCenter.longitude),
                        new mapkit.CoordinateSpan(this.coordinateSpan[0], this.coordinateSpan[1])
                    );
                    Amapkit.region = region;
                }
                throttleTimer = setTimeout(() => {
                    clearTimeout(throttleTimer);
                    throttleTimer = null
                }, 1000);
            }
        },

        //排序
        setSort(index) {
            let obj
            switch (index) {
                case 1:
                    if (this.sortState.time) {
                        obj = { createTime_ORDER: "ASC" };
                    } else {
                        obj = { createTime_ORDER: "DESC" };
                    }
                    this.sortState.time = !this.sortState.time
                    break;
                case 2:
                    if (this.sortState.price) {
                        obj = { price_ORDER: "ASC" };
                    } else {
                        obj = { price_ORDER: "DESC" };
                    }
                    this.sortState.price = !this.sortState.price
                    break;
                case 3:
                    if (this.sortState.area) {
                        obj = { floorArea_ORDER: "ASC" };
                    } else {
                        obj = { floorArea_ORDER: "DESC" };
                    }
                    this.sortState.area = !this.sortState.area
                    break;
            }
            this.searchData = { ...this.clearData2({ createTime_ORDER: '', price_ORDER: '', floorArea_ORDER: '' }), ...obj }
            console.log(this.searchData)
        },

        //清除只返回值
        clearData2(obj) {
            const objKeys = Object.keys(obj);
            return Object.keys(this.searchData).reduce((acc, key) => {
                if (!objKeys.includes(key)) {
                    acc[key] = this.searchData[key];
                }
                return acc;
            }, {});
        },
        //获取字典
        getSelectData(key) {
            const data = this.dictionaryTree[key]
            if (data != undefined) {
                return this.dictionaryTree[key]
            } else {
                return [{ dictName: this.$t('text.Common.l12'), dictValue: "-1", }]
            }
        },
        //点击之后跳转
        gotoMap(item) {
            let lon = null
            let lat = null
            if (item.mapCoordinates != null && item.mapCoordinates.split(",").length == 2) {
                lon = Number(item.mapCoordinates.split(",")[0])
                lat = Number(item.mapCoordinates.split(",")[1])
                // 自动适应显示想显示的范围区域
                if (localStorage.getItem("mapType") != 'mapkit') {
                    var marker = new this.AMaps.Marker({
                        map: this.map,
                        position: [lon + 0.0007, lat - 0.00025],
                    });
                    this.map.add(marker)
                    this.map.setFitView(marker);
                } else {
                    //苹果地图跳转
                    const region = new mapkit.CoordinateRegion(
                        new mapkit.Coordinate(lat, lon),
                        new mapkit.CoordinateSpan(this.coordinateSpan[0], this.coordinateSpan[1])
                    );
                    Amapkit.region = region;
                }
            } else {
                ElMessage.error({
                    showClose: true,
                    message: this.$t('text.Common.l44'),
                    type: 'error',
                })
            }
        },

        //跳转详情
        gotoDetail(item) {
            if (this.searchData.houseClass != 2) {
                this.$router.push({ path: '/detail', query: { id: item.id, index: this.searchData.houseClass } })
            } else {
                this.$router.push({ path: '/newHouseDetail', query: { id: item.id, index: this.searchData.houseClass } })
            }
        },
        //地图标注
        MapAnnotation(data) {
            if (localStorage.getItem("mapType") == 'mapkit') {
                //苹果地图标注
                if (Amapkit && Amapkit.annotations && Amapkit.annotations.length > 0) {
                    // 清除所有标注
                    Amapkit.removeAnnotations(Amapkit.annotations);
                }
                let temp
                if (this.searchData.houseClass == 2) {
                    temp = this.calculateAverage2(data)
                } else {
                    temp = this.calculateAverage1(data)
                }
                console.log(temp)
                let myData = []
                //构造数据
                let coordinatesList = []
                temp.forEach(element => {
                    if (element.mapCoordinates) {
                        myData.push({
                            data: {
                                coordinate: new mapkit.Coordinate(parseFloat(element.mapCoordinates.split(",")[1]), parseFloat(element.mapCoordinates.split(",")[0])),
                                community: element.community,
                                count: element.count,
                                price: element.price
                            }
                        })
                        coordinatesList.push(new mapkit.Coordinate(parseFloat(element.mapCoordinates.split(",")[1]), parseFloat(element.mapCoordinates.split(",")[0])))
                    }
                })
                //创建图层DOM
                var factory = (coordinate, options) => {
                    const customCallout = document.createElement("div");
                    customCallout.className = "custom-callout";

                    const child1 = document.createElement("div");
                    child1.className = "child1";
                    child1.textContent = options.data.community;

                    const child2 = document.createElement("div");
                    child2.className = "child2";
                    child2.textContent = "|";

                    const child3 = document.createElement("div");
                    child3.className = "child3";
                    child3.textContent = options.data.count + this.$t('text.Common.l16');

                    const child4 = document.createElement("div");
                    child4.className = "child4";
                    child4.textContent = String(parseInt(options.data.price)).replace(/\B(?=(\d{3})+(?!\d))/g, ',') + ' AED'

                    customCallout.appendChild(child1);
                    customCallout.appendChild(child2);
                    customCallout.appendChild(child3);
                    customCallout.appendChild(child4);

                    return customCallout;
                };

                //循环添加，标注到地图上
                myData.forEach((data) => {
                    var annotation = new mapkit.Annotation(data.data.coordinate, factory, data);
                    annotation.draggable = false;
                    Amapkit.addAnnotation(annotation);
                });

                // 设置视野,并让它只执行一次
                if (!this.isSetRegion && coordinatesList.length > 0) {
                    const centerCoord = new mapkit.Coordinate(
                        coordinatesList[0].latitude, coordinatesList[0].longitude
                    );
                    // const centerCoord = coordinatesList.reduce((acc, coord) => {
                    //     return new mapkit.Coordinate(
                    //         (acc.latitude + coord.latitude) / 2,
                    //         (acc.longitude + coord.longitude) / 2
                    //     );
                    // });
                    const region = new mapkit.CoordinateRegion(
                        centerCoord,
                        new mapkit.CoordinateSpan(this.coordinateSpan[0], this.coordinateSpan[1])
                    );
                    Amapkit.region = region;
                    this.isSetRegion = true
                }
            } else {
                //高德地图标注
                if (this.map) {
                    this.map.clearMap();
                }
                let temp
                if (this.searchData.houseClass == 2) {
                    temp = this.calculateAverage2(data)
                } else {
                    temp = this.calculateAverage1(data)
                }

                temp.forEach(element => {
                    if (element.mapCoordinates) {
                        var markerContent =
                            `<div class="custom-callout">
                                    <div class="child1">${element.community}</div> 
                                    <div class="child2">|</div> 
                                    <div class="child3">${element.count}${this.$t('text.Common.l16')}</div> 
                                    <div class="child4">${String(parseInt(element.price)).replace(/\B(?=(\d{3})+(?!\d))/g, ',') + ' AED'}</div> 
                                 </div>`
                        if (element.mapCoordinates) {
                            var marker = new this.AMaps.Marker({
                                position: new this.AMaps.LngLat(element.mapCoordinates.split(",")[0], element.mapCoordinates.split(",")[1]),
                                // 将 html 传给 content
                                content: markerContent,
                                // 以 icon 的 [center bottom] 为原点
                                //offset: new this.AMaps.Pixel(-13, -30)
                            });
                            // 将 markers 添加到地图
                            this.map.add(marker);
                            //设置自适应视野
                            //this.map.setFitView(null, false, [150, 60, 100, 160]);
                        }
                    }
                });
            }
        },

        //分组求平均值
        calculateAverage1(data) {
            // 创建一个对象，用于分组和计算平均值
            const groupedData = {};
            // 遍历数据数组
            data.forEach(item => {
                // 使用 community 作为分组的键
                const key = item.community;
                // 如果该分组不存在，创建一个新的分组
                if (!groupedData[key]) {
                    groupedData[key] = {
                        community: key,
                        mapCoordinates: item.mapCoordinates,
                        prices: [item.price], // 用于存储相同 community 的价格
                        count: 1, // 计数器，初始化为 1
                    };
                } else {
                    // 如果分组已存在，将价格添加到 prices 数组中，并增加计数
                    groupedData[key].prices.push(item.price);
                    groupedData[key].count += 1;
                }
            });
            // 对每个分组计算平均价格
            const result = Object.values(groupedData).map(group => ({
                community: group.community,
                mapCoordinates: group.mapCoordinates,
                price: group.prices.reduce((sum, price) => sum + price, 0) / group.prices.length,
                count: group.count, // 添加计数器到结果对象中
            }));
            return result;
        },

        //分组求新房平均值
        calculateAverage2(data) {
            // 创建一个对象，用于分组和计算平均值
            const groupedData = {};
            // 遍历数据数组
            data.forEach(item => {
                // 使用 name 和 mapCoordinates 作为分组的键
                const key = `${item.name}_${item.mapCoordinates}`;
                // 如果该分组不存在，创建一个新的分组
                if (!groupedData[key]) {
                    groupedData[key] = {
                        community: item.name,
                        mapCoordinates: item.mapCoordinates,
                        lowerPrices: [item.lowerPrice], // 用于存储相同 name 和 mapCoordinates 的 lowerPrice
                        upperPrices: [item.upperPrice], // 用于存储相同 name 和 mapCoordinates 的 upperPrice
                        count: 1, // 计数器，初始化为 1
                    };
                } else {
                    // 如果分组已存在，将 lowerPrice 和 upperPrice 添加到对应的数组中，并增加计数
                    groupedData[key].lowerPrices.push(item.lowerPrice);
                    groupedData[key].upperPrices.push(item.upperPrice);
                    groupedData[key].count += 1;
                }
            });
            // 对每个分组计算 lowerPrice 和 upperPrice 的平均值
            const result = Object.values(groupedData).map(group => ({
                community: group.community,
                mapCoordinates: group.mapCoordinates,
                price: (group.lowerPrices.reduce((sum, price) => sum + price, 0) + group.upperPrices.reduce((sum, price) => sum + price, 0)) / (2 * group.count),
                count: group.count, // 添加计数器到结果对象中
            }));
            return result;
        },

        //拼接单个子组件返回来的条件值
        setData(obj) {
            console.log(obj)
            this.searchData = { ...this.searchData, ...obj }
            console.log(JSON.stringify(this.searchData))
        },
        setType(obj) {
            this.searchData.houseClass = obj.dictValue
            this.search()
        },
        //子组件选择了不限，进行删除指定字段
        clearData(obj) {
            const objKeys = Object.keys(obj);
            this.searchData = Object.keys(this.searchData).reduce((acc, key) => {
                if (!objKeys.includes(key)) {
                    acc[key] = this.searchData[key];
                }
                return acc;
            }, {});
            console.log(JSON.stringify(this.searchData))
        },
        //搜索数据
        search() {
            if (this.searchData.houseClass != 2) {
                findPageByParam(this.searchData).then(res => {
                    if (res !== undefined) {
                        this.houseList = res.dataList
                        this.MapAnnotation(res.dataList)
                        this.total = res.total
                        console.log(res)
                    }
                }).catch()
            } else {
                let temp = JSON.parse(JSON.stringify(this.searchData))
                temp.pageNo = this.searchData.page
                temp.pageSize = this.searchData.size
                newsFindPageParam(temp).then(res => {
                    if (res !== undefined) {
                        this.houseList = res.dataList
                        this.MapAnnotation(res.dataList)
                        this.total = res.total
                        console.log(res)
                    }
                }).catch()
            }
        },
    },
    watch: {
        searchData: {
            handler() {
                this.search()
            }
        },
        realName() {
            if (this.realName != "") {
                this.setData({ name_LIKE: this.realName })
            } else {
                this.clearData({ name_LIKE: "" })
            }
        },
        communityOrId() {
            if (this.communityOrId != "") {
                this.setData({ communityOrId: this.communityOrId })
            } else {
                this.clearData({ communityOrId: "" })
            }
        }
    }
};
</script>
<style>
.custom-callout {
    position: relative;
    background-color: #2f71f7;
    border-radius: 15px;
    /* width: 200px; */
    height: 30px;
    display: flex;
    box-shadow: 1px 1px 2px 2px rgb(231 229 229 / 20%);
    align-items: center;
    transform: translateX(-50%) translateY(-100%);
}

.custom-callout::before {
    content: "";
    position: absolute;
    bottom: -5px;
    left: 50%;
    transform: translateX(-50%);
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid #2f71f7;
}

.child1 {
    font-size: 12px;
    color: white;
    white-space: nowrap;
    margin-left: 10px;
    white-space: nowrap;
}

.child2 {
    font-size: 12px;
    color: white;
    white-space: nowrap;
    margin-left: 8px;
    white-space: nowrap;
}

.child3 {
    font-size: 12px;
    color: white;
    white-space: nowrap;
    margin-left: 7px;
    white-space: nowrap;
}

.child4 {
    min-width: 38px;
    background: white;
    font-size: 12px;
    border-radius: 15px;
    color: #2f71f7;
    text-align: center;
    line-height: 16px;
    margin-left: 8px;
    margin-right: 10px;
    padding: 1px 3px;
    white-space: nowrap;
    padding: 1px 3px;
}
</style>

<style scoped>
.area {
    padding-left: 5px;
    padding-right: 5px;
    display: flex;
    width: 85px;
    justify-content: center;
}

.img1 {
    right: 5px;
    width: 15px;
    height: 15px;
    top: 6px;
    z-index: 1;
    position: absolute;
}

.leftTop2Input {
    outline: none;
    width: 130px;
    height: 21px;
    border: 1px solid rgb(220, 223, 230);
    background-color: white;
    border-radius: 3px;
    font-size: 12px;
    position: relative;
    margin: 1px;
}

.leftTop2Input:focus {
    border: 1px solid #6698ff;
}

.search-results {
    list-style: none;
    padding: 0;
}

.search-result {
    cursor: pointer;
    padding: 5px;
    border-bottom: 1px solid #ccc;
    background: white;
}

.d1 {
    position: absolute;
    top: 20px;
    left: 30px;
    display: flex;
    background-color: white;
    font-size: 12px;
}

.d2 {
    position: absolute;
    top: 20px;
    left: 420px;
    display: flex;
    background-color: white;
    height: 26px;
    font-size: 12px;
    display: flex;
    align-items: center;
}

.d3 {
    position: absolute;
    top: 60px;
    left: 30px;
    display: flex;
    background-color: white;
    height: 26px;
    font-size: 12px;
    display: flex;
    align-items: center;
    height: 30px;
    line-height: 30px;
    padding-left: 10px;
    padding-right: 10px;
    font-weight: 700;
    width: 327px;
    justify-content: space-between;
}

.d4 {
    position: absolute;
    top: 92px;
    left: 30px;
    display: flex;
    background-color: white;
    height: 26px;
    font-size: 12px;
    display: flex;
    align-items: center;
    height: 60%;
    line-height: 30px;
    font-weight: 700;
    width: 327px;
    border-radius: 3px;
    flex-direction: column;
    overflow-y: auto;
    padding: 10px;
    padding-top: 0;
}

.d4::-webkit-scrollbar {
    /*滚动条整体样式*/
    width: 2px;
    /*高宽分别对应横竖滚动条的尺寸*/
    height: 0px;
    background-color: white;
    /*滚动槽颜色*/
}

.d4::-webkit-scrollbar-thumb {
    /*滚动条里面小方块*/
    border-radius: 5px;
    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    background-color: #79bbff;
    ;
    /*滚动条颜色*/
}

.d4::-webkit-scrollbar-track {
    /*滚动条里面轨道*/
    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    border-radius: 0;
    background: rgba(0, 0, 0, 0.1);
}


.df {
    padding: 0 20px;
}



.l1 {
    display: flex;
}

.l2 {
    width: 90px;
    height: 70px;
}

.l3 {
    border-bottom: 1px solid #eee;
    text-align: left;
    font-weight: normal;
    padding-left: 6px;
    width: 100%;
}

.l4 {
    font-size: 12px;
    line-height: 20px;
    color: black;
}

.l5 {
    font-size: 12px;
    line-height: 20px;
    color: gray;
}

.l6 {
    color: #f1908d;
    font-weight: 700;
    padding-right: 20px;
    white-space: nowrap;
}

.l7 {
    color: gray;
    white-space: nowrap;
}

.l8 {
    height: 20px;
    line-height: 20px;
    display: flex;
    justify-content: space-between;
    gap: 15px;
}

.l9 {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.l10 {
    height: 20px;
    line-height: 20px;
    display: flex;
    justify-content: space-between;
    flex: 1;
}

.tag1 {
    font-size: 12px;
    border-radius: 3px;
    background-color: rgb(236, 128, 141);
    padding: 2px 3px;
    color: white;
    margin-right: 5px;
    height: 15px;
    line-height: 15px;
    white-space: nowrap;
}

.tag2 {
    font-size: 12px;
    border-radius: 3px;
    background-color: rgb(249, 205, 144);
    padding: 2px 3px;
    color: white;
    margin-right: 5px;
    height: 15px;
    line-height: 15px;
    white-space: nowrap;
}

.tag3 {
    font-size: 12px;
    border-radius: 3px;
    background-color: rgb(66, 157, 248);
    padding: 2px 3px;
    color: white;
    margin-right: 5px;
    height: 15px;
    line-height: 15px;
    white-space: nowrap;
}

.tag4 {
    font-size: 12px;
    border-radius: 3px;
    background-color: rgb(2, 191, 191);
    padding: 2px 3px;
    color: white;
    margin-right: 5px;
    height: 15px;
    line-height: 15px;
    white-space: nowrap;
}

.tag5 {
    font-size: 12px;
    border-radius: 3px;
    background-color: rgb(242, 242, 242);
    color: black;
    border: 1px solid rgb(215, 215, 215);
    margin-right: 5px;
    padding: 2px 3px;
    height: 15px;
    line-height: 15px;
}

.tag6 {
    font-size: 12px;
    border-radius: 3px;
    background-color: #f9cd90;
    color: white;
    border: 1px solid #f9cd90;
    margin-right: 5px;
    padding: 2px 3px;
    height: 15px;
    line-height: 15px;
}

.tag7 {
    font-size: 12px;
    border-radius: 3px;
    background-color: rgb(66, 157, 248);
    color: white;
    border: 1px solid rgb(66, 157, 248);
    margin-right: 5px;
    padding: 2px 3px;
    height: 15px;
    line-height: 15px;
}

.tag8 {
    font-size: 12px;
    border-radius: 3px;
    background-color: #5ec8b2;
    color: white;
    border: 1px solid #5ec8b2;
    margin-right: 5px;
    padding: 2px 3px;
    height: 15px;
    line-height: 15px;
}

.n1 {
    font-weight: normal;
    color: black;
    text-align: left;
    display: flex;
    width: 100%;
    padding-bottom: 5px;
}

.n2 {
    flex: 1;
}
</style>